<template>
    <div>
        <common-banner name="关于我们" en-name="About Us"></common-banner>

        <div class="page-center">
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right" class="mt-20 mb-20">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>关于我们</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="top-container mt-20 us-pc">
                <div class="image-wrapper">
                    <div class="mr-25">
                        <img src="../assets/imgs/dot.png" />
                    </div>
                    <div class="animate-img">
                        <img src="../assets/imgs/a1.jpg" />
                    </div>
                </div>
                <div class="text-content">
                    <p class="mr-20"><animated-counter :number="2012" text="年成立"></animated-counter></p>
                    <p class="mr-20"><animated-counter :number="200000" text="多个可供化合物"></animated-counter></p>
                    <p class="mr-20"><animated-counter :number="5000" text="多家医药领域客户"></animated-counter></p>
                    <p><animated-counter :number="6000" text="多个库存杂质"></animated-counter></p>
                </div>
            </div>
            <div class="bottom-container us-pc">
                <div class="image-wrapper">
                    <img src="../assets/imgs/a2.jpg" />
                </div>
                <div class="text-content">
                    <p class="indent mt-20">
                        深圳菲斯生物科技有限公司是一家基于化学和医药科技基础的国家高新技术企业，公司聚焦于为医药科研工作者提供药物分析标准品和药剂服务。依托于成熟的供应链渠道管理和丰富的化学合成经验，形成以代理国内外知名药物杂质品牌和自主研发、合成药物杂质对照品的工贸一体销售体系，搭建起一个产品数量多、品种齐全、质量可靠、价格合理的药物杂质供应平台。
                    </p>
                    <p class="indent mt-20">
                        公司整合了多种药物杂质对照品，涵盖市场常用品种，能快速响应客户需求。同时致力于成为药物杂质对照品领军企业，紧跟市场热点与需求，加大研发投入，加速药物杂质对照品的建设，以满足医药科研工作者对杂质多样化需求，助力医药研发，促进人类健康。
                    </p>
                    <p class="weight-600 mt-20">我们的优势：全面 高效 专业</p>
                    <p class="weight-600 mt-20 mb-20">1. 全面</p>
                    <p>产品齐全</p>
                </div>
            </div>
            <div class="us-mobile">
                <div class="image-wrapper">
                    <div class="animate-img">
                        <img src="../assets/imgs/a1.jpg" />
                    </div>
                </div>
                <!-- <div class="image-wrapper">
                    <img src="../assets/imgs/a2.jpg" />
                </div> -->
                <div class="text-content">
                    <!-- 关于我们 -->
                    <index-about-us-mobile :title="'false'"></index-about-us-mobile>

                    <div class="text-padd">
                        <p class="weight-600 mt-20">我们的优势：全面 高效 专业</p>
                        <p class="weight-600 mt-20 mb-20">1. 全面</p>
                        <p>产品齐全</p>
                    </div>
                </div>
            </div>

            <div ref="textRef" class="text-padd">
                <div :class="['animated-text', { 'fade-in': isVisible }]">
                    <p>
                        我们的主要产品包括进口/国内标准品、杂质对照品、参比制剂一次性进口、化学试剂、实验室仪器、耗材等500,000余种产品。我们优势代理众多国内外著名品牌的标准品，如中检所产品、英国LGC、加拿大TRC、加拿大TLC、加拿大MC、欧洲药典EP、英国药典BP、日本药典JP、美国药典USP等，能充分满足客户对标准品一站式采购的需求。
                    </p>
                    <p>自主品牌</p>
                    <p>
                        Sinco
                        Pharmachem（简称SINCO），药物标准品研发中心，拥有国际领先标准的化学实验室，专业为化学药物领域的科学家提供复杂有机小分子化合物、杂质对照品、API标准品、稳定同位素。sinco已生产超30000个产品，远销全球40多个国家，服务的客户涵盖全球生物技术公司、药品生产企业、大学以及各种科研机构。Sinco始终以客户需求为导向，依托科学的管理方法和国际的科研技术，充分地帮助客户以合理的价格获得高品质的产品和服务，为客户创造卓越价值。
                    </p>
                    <p>服务多样</p>
                    <p>
                        除常规产品外，我们还提供稀有疑难杂质对照品定制合成服务、参比制剂一次性进口服务,同时能为客户提供医药行业的热门项目咨询服务与相关的配套技术服务。我们将根据市场发展和客户的需要，持续拓展更多的服务项目。
                    </p>
                    <p class="weight-600 mt-20 mb-20">2.高效</p>
                    <p>高效交货</p>
                    <p>
                        我们有从业多年经验丰富的客服团队及采购团队，拥有顺畅且完善的进口渠道，货期稳定快速。常规产品可在24小时内答复客户成本及交期，一般在3-4周内完成交货；杂质对照品定制合成服务可在24小时内答复客户成本及交期，对于我们研发过的产品进行新批次生产，可在2-4周内交货。
                    </p>
                    <p>高效售后</p>
                    <p class="mb-20">
                        我们有成熟完善的售后服务机制，24小时在线，及时地响应客户的售后问题并跟进解决，为客户带来便捷良好的合作体验。
                    </p>

                    <p class="weight-600 mt-20 mb-20">3.专业</p>
                    <p>专业客服</p>
                    <p>
                        我们拥有一支具备生物医药专业背景的客服团队，能根据客户的需求，准确地为客户提供售前建议，帮助客户省时省力，以合理的价格获得高品质的产品。
                    </p>
                    <p>专业研发</p>
                    <p class="mb-20">
                        我们拥有600㎡的国际领先标准的化学实验室，实验室团队由海外留学归来的博士、国内各大高校医药学教授、大型科研院所的科研人才组成。我们能为客户提供特殊医药杂质对照品的定制合成服务，目前已成功地开发了近500套杂质及相关产品工艺，研发能力得到客户的高度认可。
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import CommonBanner from '@/components/CommonBanner.vue'
import AnimatedCounter from '@/components/AnimatedCounter.vue'

import IndexAboutUsMobile from '@/components/home/IndexAboutUsMobile.vue'

document.title = `关于我们 ${document.title}`

const textRef = ref(null)
const isVisible = ref(false)
const threshold = 0.5
let observer = null
const createObserver = () => {
    observer = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    isVisible.value = true
                    observer.unobserve(entry.target)
                }
            })
        },
        {
            threshold: threshold,
        }
    )

    if (textRef.value) {
        observer.observe(textRef.value)
    }
}

onMounted(() => {
    createObserver()
})

onUnmounted(() => {
    if (observer) {
        observer.disconnect()
    }
})
</script>
<style scoped lang="scss">
.top-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 260px;
    overflow: hidden;

    .image-wrapper {
        display: flex;

        .animate-img {
            height: 100%;
            transform: translateX(-100vw);
            animation: slideFromLeft 1.2s ease forwards 0.3s;
        }
        @keyframes slideFromLeft {
            0% {
                opacity: 0;
                transform: translateX(-100vw);
            }
            60% {
                transform: translateX(20px);
            }
            80% {
                transform: translateX(-10px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
    }

    .text-content {
        display: flex;
        align-items: center;
    }
}

.bottom-container {
    display: flex;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;

    .image-wrapper {
        flex: 1;
        order: 2;
        img {
            width: 600px;
            height: 400px;
            opacity: 0;
            transform: translateX(100vw);
            animation: slideFromRight 1.2s ease forwards 0.3s;
        }
        @keyframes slideFromRight {
            0% {
                opacity: 0;
                transform: translateX(100vw);
            }
            60% {
                transform: translateX(-20px);
            }
            80% {
                transform: translateX(10px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
    }

    .text-content {
        flex: 2;
        order: 1;
        font-size: 16px;
        line-height: 1.6;
        color: #333;
    }

    .text-content .indent {
        text-indent: 2em;
        margin-right: 40px;
    }
}
.animated-text {
    opacity: 0;
    transform: translateY(200px);
    transition: all 0.8s ease-out;
}

.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.us-mobile {
    display: none;
}

@media (max-width: 768px) {
    .page-center {
        width: auto !important;
    }
    .breadcrumb {
        margin-left: 10px;
    }

    .us-pc {
        display: none;
    }
    .us-mobile {
        display: block;
    }

    // 样式调整
    .image-wrapper {
        .mr-25 {
            display: none !important;
        }
    }

    .image-wrapper {
        display: flex;
        overflow: hidden;
        .animate-img {
            width: 100%;
            transform: translateX(-100vw);
            animation: slideFromLeft 1.2s ease forwards 0.3s;
        }
    }

    .text-padd {
        padding: 0 16px;
    }
}
</style>
